<template>
  <!--所有的item都展示同一个图片, 同一个文字-->
  <div class="tabbar-item" @click="itemClick" :class="{ active: isActive }">
    <slot name="item-icon"></slot>
    <slot name="item-text"></slot>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    path: String,
  },
  data() {
    return {
      // isActive: false,
    };
  },
  computed: {
    isActive() {
      // 判断路由里面有没有当前路径 不等于-1表示有当前路径
      return this.$route.path.indexOf(this.path) !== -1;
    },
  },
  methods: {
    itemClick() {
      console.log("itemclick");
      this.$router.push(this.path);
    },
  },
};
</script>
<style scoped>
@import url(../../assets/font/iconfont);
.tabbar-item {
  height: 49px;
  text-align: center;
  /* color: red; */
}
.tabbar-item span {
  width: 25px;
  height: 33px;
  /* color: #323232; */
  /* color: red; */
  font-size: 20px;
}
.item-text {
  font-size: 10px;
  margin-top: 6px;
}
.active {
  color: red;
}
</style>